<!-- 维基文化 -->
<template>
    <div class="wiki-culture">
        <div class="main-img">
            <img src="~/static/img/wiki/main.jpg">
        </div>
        <div class="main-container cp-container">
            <el-row :gutter="20" class="row-out">
                <el-col :span="6" v-for="(item,index) in themeList" :key="index" >
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" class="card" >
                        <a :href="baikeWebUrl" target="_blank">
                            <img :src="item.imgUrl"  class="image">
                            <div  class="text">{{item.name}}</div>
                        </a>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-row  class="row-innner inner-top">
                        <el-card shadow="hover" class="card ">
                            <a :href="baikeWebUrl" target="_blank">
                                <img src="~/static/img/wiki/university.jpg"  class="image last-img">
                                <div  class="text">铯镨大学</div>
                            </a>
                        </el-card>
                    </el-row>
                    <el-row class="row-innner inner-bottom">
                        <el-card shadow="hover" class="card ">
                            <a :href="baikeWebUrl" target="_blank" class="lastLink">
                                <img src="~/static/img/wiki/more.jpg"  class="last-img ">
                                <span  class="text last-text">查看更多</span>
                            </a>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {baikeWebUrl} from '../../../../config/server.url.conf'
@Component({
    layout: 'community',
    head () {
        return {
            title: '维基文化-CIIP社群中心-建筑业交流平台'
        }
    }
})
export default class PageCommunityEnterprise extends Vue {
    baikeWebUrl: string = baikeWebUrl
    themeList:any[]=[
        {name: '建筑维基百科', imgUrl: require('~/static/img/wiki/bk.jpg')},
        {name: '建筑博览', imgUrl: require('~/static/img/wiki/expo.jpg')},
        {name: '建筑智库', imgUrl: require('~/static/img/wiki/library.jpg')}]
}
</script>
<style lang='scss' scoped>
    .wiki-culture{
        overflow: hidden;
        background: #F8F8F8;
        padding-bottom:185px;
        .main-img{
            position:relative;
            left:50%;
            margin-left:-960px;
            width:1920px;
            img{
                display: block;
            }
        }
        .main-container{
            margin: 40px auto 0;
            font-size: 20px;
            .row-out{
                margin-bottom: 20px;
                .image {
                    display: block;
                    margin: 45px auto 120px;
                }
                .text{
                    margin-bottom: 60px;
                    text-align: center;
                }
                .inner-top{
                    .image{
                        margin: 45px auto 29px;
                    }
                    .text{
                        margin-bottom: 30px;
                        text-align: center;
                    }
                }
                .inner-bottom{
                    margin-top: 20px;
                    .lastLink{
                        display: flex;
                        align-items: center;
                        .last-img{
                            margin-left: 40px;
                            margin-right: 50px;
                        }
                        .last-text{
                            font-size: 16px;
                            color: #666666;
                            margin-bottom:0
                        }
                    }
                }
                .card:hover{
                    .text{
                        color: #11A9E8;
                    }
                }
            }
        }
    }
</style>
<style lang='scss'>
    .wiki-culture{
        .el-card__body{
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            a{
                height: 100%;
                width: 100%;
                color: #333;
            }
        }
    }
</style>
